<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt" %>
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <jsp:include page="../header.jsp"></jsp:include>
</head>

<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">客户列表</h1>
</header>

<div class="mui-content">
    <div class="mui-card">
        <ul class="mui-table-view mui-table-view-chevron">
            <c:forEach items="${devUsers}" var="vo">
                <li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right"
                                                                href="#">${vo.userName}|${vo.tel}</a>
                    <c:if test="${vo.devInfoList != null}">
                        <ul class="mui-table-view mui-table-view-chevron">
                            <c:forEach items="${vo.devInfoList}" var="subVo">
                                <li class="mui-table-view-cell">
                                    <a href="${pageContext.request.contextPath}/distributor/custom/customDevInfo?devId=${subVo.id}">
                                        <div class="mui-table">
                                            <div class="mui-table-cell mui-col-xs-10">
                                                <img class="mui-media-object mui-pull-left"
                                                     src="${pageContext.request.contextPath}/static/img/51.png">
                                                <h5 class="mui-ellipsis">
                                                    设备ID：${subVo.id}
                                                </h5>
                                                <h5 class="mui-ellipsis">
                                                    设备状态：${subVo.devStatus}
                                                </h5>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                            </c:forEach>
                        </ul>
                    </c:if>
                </li>
            </c:forEach>
        </ul>
    </div>
</div>
<nav class="mui-bar mui-bar-tab">
    <a class="mui-tab-item mui-active" href="/distributor/total/index">
        <span class="mui-icon mui-icon-list"></span>
        <span class="mui-tab-label">客户列表</span>
    </a>
    <a class="mui-tab-item" href="/distributor/total/index">
        <span class="mui-icon mui-icon-flag"></span>
        <span class="mui-tab-label">数据统计</span>
    </a>
    <a class="mui-tab-item" href="/distributor/center/index">
        <span class="mui-icon mui-icon-person"></span>
        <span class="mui-tab-label">我的信息</span>
    </a>
</nav>
</body>
<jsp:include page="../footer.jsp"></jsp:include>
<script>
    mui.init({
        swipeBack: true //启用右滑关闭功能
    });
</script>
</html>